You said:
import React from "react";
const QuizHistoryPage = () => {
const history = JSON.parse(localStorage.getItem("quizHistory")) || [];
// Calculate weak topics: topics where score/total < 0.5 multiple times
const weakTopics = history.reduce((acc, quiz) => {
const ratio = quiz.score / quiz.total;
if (ratio < 0.5) {
acc[quiz.topic] = (acc[quiz.topic] || 0) + 1;
}
return acc;
}, {});
return (
<div>
<h1>Past Quizzes</h1>
<ul>
{history.map(({ topic, score, total, date }, i) => (
<li key={i}>
<strong>{topic}</strong> — Score: {score}/{total} — {new Date(date).toLocaleString()}
</li>
))}
</ul>
<h2>Weak Topics</h2>
<ul>
{Object.entries(weakTopics).length === 0 && <li>None yet — Keep practicing!</li>}
{Object.entries(weakTopics).map(([topic, count]) => (
<li key={topic}>
{topic} — Struggled {count} {count > 1 ? "times" : "time"}
</li>
))}
</ul>
</div>
);
};
export default QuizHistoryPage; I need to style this page as similar to that picture give me css code for this one